<script setup lang="ts">
import { reactive } from "vue";

// 表单数据
const saveForm = reactive<Record<string, any>>({});
// 表单事件
const formEvent = reactive({
  onFinish() {}
});
</script>

<template>
  <div class="article-form h-full flex flex-col">
    <!-- 文章标题 -->
    <div class="form-title bg-white rounded p-2 flex items-center gap-2 mb-2 flex-shrink-0">
      <AInput :bordered="false" placeholder="请输入标题" v-model:value="saveForm.title" />
    </div>
    <div class="flex-1 flex gap-2">
      <div class="h-full flex-1 p-4 bg-white rounded">
        <WebxWEditor v-model:html="saveForm.content" />
      </div>
      <div class="w-[500px] flex-shrink-0 bg-white rounded p-4">
        <AForm :model="saveForm" @finish="formEvent.onFinish">
          <AFormItem
            label="描述"
            name="description"
            :rules="[{ required: true, message: '请填写描述' }]"
          >
            <ATextarea
              placeholder="请填写文章描述"
              :autoSize="{ minRows: 3, maxRows: 5 }"
              v-model:value="saveForm.description"
            />
          </AFormItem>
          <div class="flex items-center gap-2">
            <AFormItem name="isCommit">
              <ACheckbox v-model:checked="saveForm.isCommit">支持评论</ACheckbox>
            </AFormItem>
            <AFormItem name="isTop">
              <ACheckbox v-model:checked="saveForm.isTop">置顶</ACheckbox>
            </AFormItem>
            <AFormItem name="isSecret">
              <ACheckbox v-model:checked="saveForm.isSecret">隐私</ACheckbox>
            </AFormItem>
          </div>
          <AFormItem>
            <AButton type="primary" htmlType="submit">保存</AButton>
          </AFormItem>
        </AForm>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less"></style>
